<template>
	<page-meta>
		<navigation-bar />
	</page-meta>
	<view class="uni-pages" style="background-color: #F5F5F5;">
		<view class="status_bar"></view>
		<view class="user">
			<view class="uni-row justify-between align-center" style="height: 180rpx;">
				<view class="uni-row align-center">
					<image :src="eduUserInfo.headImgUrl ? eduUserInfo.headImgUrl : '/static/image/headpic.png'" class="headpic"></image>
					<view class="margin-left-sm">
						<text v-if="isLogin" class="text-df text-white">{{eduUserInfo.userName}}</text>
						<text v-else @click="navigateTo('/pages/user/login/login')"
							class="text-df text-white">未登录</text>
					</view>
				</view>
			</view>
			<view class="headfun">
				<view class="uni-row headfun-list" style="color: #606266;">
					<view @click="navigateTo('/pages/edu/concat-me')"
						class="flex flex-direction align-center">
						<image src="/static/icon/concat-me.png" class="icon"></image>
						<text class="margin-top-xs text-sm">联系我们</text>
					</view>
					<view @click="switchTo('/pages/edu/list')" class="flex flex-direction align-center">
						<image src="/static/icon/wdkc.png" class="icon"></image>
						<text class="margin-top-xs text-sm">我的课程</text>
					</view>
				</view>
			</view>
		</view>
		<view style="position: fixed;width: 100%;bottom: 240rpx;left: 0;">
			<button class="bg-cyan" @click="loginOut" style="width: 54%;">退出登录</button>
		</view>

	</view>
</template>

<script>
	export default {
		computed: {
		},
		methods: {
			async loginOut(){
				await this.$store.dispatch('eduUser/logOut')
				this.$store.dispatch("user/autologin")
			},
		},
		onLoad() {}
	}
</script>

<style lang="scss" scoped>
	@import url("@/common/uni.scss");
	.status_bar {
        height: var(--status-bar-height);
        width: 100%;
		background: #1CBBB4;
    }
	.user {
		position: relative;
		width: 750upx;
		height: 240rpx;
		padding-left: 60upx;
		padding-right: 45upx;
		background: #1CBBB4;

		.headpic {
			height: 99upx;
			width: 99upx;
			border-radius: 99upx;
		}

		.headfun {
			position: absolute;
			left: 0upx;
			bottom: -75upx;
			width: 100%;
			height: 140upx;
			justify-content: center;

			&-list {
				margin-left: 20upx;
				margin-right: 20upx;
				flex: 1;
				padding-left: 65upx;
				padding-right: 65upx;
				background-color: #FFFFFF;
				border-radius: 20upx;
				justify-content: space-between;
				align-items: center;
			}

			.icon {
				height: 50rpx;
				width: 50rpx;
			}
		}
	}

	.cell {
		margin-left: 20upx;
		margin-right: 20upx;
		background-color: #FFFFFF;
		border-radius: 8upx;

		.icon {
			height: 42upx;
			width: 42upx;
			margin-right: 10upx;
		}
	}

	.clearBtn {
		margin: 0;
		padding: 0;
		line-height: 1;
		background-color: #FFFFFF;
	}

	.clearBtn::after {
		position: unset !important;
		border: unset;
	}
</style>
